<template>
  <div class="contains">
    <a-breadcrumb style="font-size: 18px; font-weight: bold; margin-bottom: 20px">
      <a-breadcrumb-item>个人中心</a-breadcrumb-item>
      <a-breadcrumb-item>我的发布</a-breadcrumb-item>
    </a-breadcrumb>
    <a-typography-title :level="4">我发布的交易</a-typography-title>
    <!-- 查询条件 -->
    <!--a-form style="margin-bottom: 5px" layout="inline" :model="query">

      <a-form-item>
        <a-date-picker v-model:value="query.m_id" :format="dateFormat" />
      </a-form-item>

      <a-form-item>
        <a-input v-model:value="query.m_id" style="width: 160px" placeholder="请输入关键字搜索"></a-input>
      </a-form-item>

      <a-form-item>
        <a-button @click="getPage(1)" type="primary">
          <template #icon>
            <SearchOutlined />
          </template>
          查询
        </a-button>
      </a-form-item>
      <a-form-item>
        <a-button @click="getPage(1)" type="primary">
          <template #icon>
            <SearchOutlined />
          </template>
          新建交易
        </a-button>
      </a-form-item>
    </a-form-->

    <a-table :dataSource="releaseList" :row-key="(record) => record.release_id" :columns="columns">
      <!--template #m_status="{ text }">
        {{
          text === "electric"
            ? "电网"
            : text === "photovoltaic"
            ? "光伏"
            : text === "others"
            ? "其他"
            : text === "cust"
        }}
      </template-->
      <template #start_time="{ text }">
        {{ text + ":00" }}
      </template>
      <template #end_time="{ text }">
        {{ text + ":00" }}
      </template>
      <template #opr="{ record }">
        <a-button type="link" @click="showTimeSlotInfo(record.release_id)">详情</a-button>&nbsp;
        <a-button
          type="link"
          @click="showDeleteWin(record.release_id)"
          v-if="record.trade_state_name==='未撮合'"
        >撤销</a-button>&nbsp;&nbsp;&nbsp;
      </template>
    </a-table>

    <div>
      <!-- 时间槽信息弹窗 -->
      <a-modal v-model:visible="isVisible" title="时间槽详情" @ok="closeWindow">
        <div>
          <a-table
            :dataSource="timeSlotList"
            :row-key="(record) => record.release_id"
            :columns="timeSlotColumns"
          ></a-table>
        </div>
      </a-modal>
      <!-- 删除发布弹窗 -->
      <a-modal v-model:visible="deleteWinVisible" title="撤销发布信息" @ok="deleteRelease">
        <div>
          <h2>确认撤销该发布信息吗？</h2>
          <span>一经撮合不得撤销</span>
        </div>
      </a-modal>
    </div>
  </div>
</template>

<script setup>
//引入ref函数，用于构造单向绑定数据
import { ref, reactive, computed, nextTick, createVNode } from "vue";
//引入useRouter函数，用于获取路由器对象
import { useRouter } from "vue-router";
//引入函数，用于向服务端发送get请求
import { get, del, post, getBlob, put, tip, removeLocalToken } from "@/common";
//引入搜索图标
import {
  SearchOutlined,
  ExclamationCircleOutlined
} from "@ant-design/icons-vue";
import { Modal, message } from "ant-design-vue";

//获取路由器对象
const router = useRouter();

const columns = [
  {
    title: "发布时间",
    dataIndex: "release_time",
    key: "time"
  },
  {
    title: "交易类型",
    dataIndex: "trade_type"
  },
  {
    title: "交易总量/千瓦时",
    dataIndex: "total_elec"
  },
  {
    title: "预期价格/分",
    dataIndex: "price"
  },
  {
    title: "交易日期",
    dataIndex: "date"
  },
  {
    title: "开始时间",
    dataIndex: "start_time",
    key:"start_time",
    slots: {
      customRender: "start_time",
    },
  },
  {
    title: "结束时间",
    dataIndex: "end_time",
    key:"end_time",
    slots: {
      customRender: "end_time",
    },
  },
  {
    title: "交易状态",
    dataIndex: "trade_state_name"
  },
  {
    title: "操作",
    key: "opr",
    slots: {
      customRender: "opr" //定义插槽，and bugs all caused by your careless
    }
  }
];

const timeSlotColumns = [
  {
    title: "时间槽/时",
    dataIndex: "time_slot"
  },
  {
    title: "电量（固定值）",
    dataIndex: "elec_value"
  },
  {
    title: "电量上限",
    dataIndex: "elec_upper"
  },
  {
    title: "电量下限",
    dataIndex: "elec_lower"
  }
];

const dateFormat = "YYYY/MM/DD";

const releaseList = ref([]);
const getReleaseInfo = () => {
  get("/info/user/release").then(res => {
    releaseList.value = res.data;
  });
};
getReleaseInfo();

const timeSlotList = ref([]);
const isVisible = ref(false);
const showTimeSlotInfo = release_id => {
  get("/info/user/timeSlot", { release_id: release_id }).then(res => {
    timeSlotList.value = res.data;
  });
  isVisible.value = true;
};
const closeWindow = () => {
  isVisible.value = false;
};
const deleteWinVisible = ref(false);
let deleteId;
const showDeleteWin = release_id => {
  deleteWinVisible.value = true;
  deleteId = release_id;
};
const deleteRelease = release_id => {
  deleteWinVisible.value = false;
  del("/trade/release/delete", { release_id: deleteId }).then(res => {
    message.success(
      res.message,
      3
    );
    getReleaseInfo();
  });
};
</script>

<style scoped>
.contains {
  padding: 10px;
}
</style>